<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table'

import { ref } from 'vue'

import { Page } from '@vben/common-ui'

import { Button, Input } from 'ant-design-vue'
import dayjs from 'dayjs'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { getTreeAllCategory } from '#/api/goodsStyleCategory'
const formOptions: any = {
  collapsed: true,
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: true,
  wrapperClass: 'grid-cols-5',
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '模糊搜索',
      },
      fieldName: 'style_category_name',
      label: '分类名称',
      operator: 'LIKE',
    },
  ],
  // 是否可展开
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
}
const gridOptions: VxeTableGridOptions = {
  cellConfig: {},
  height: 'auto',
  columns: [
    { type: 'checkbox', width: 70 },
    { field: 'style_category_name', title: '分类名称', treeNode: true, editRender: {} },
    { field: 'goods_no_code', title: '货号编码', editRender: {} },
    { field: 'scm_code', title: 'erp编码' },
    { field: 'erp_id', title: 'ERPID' },
    { field: 'level', title: '层级' },
    // { title: '状态', field: 'status', width: 120, slots: { default: 'status' } },
    {
      title: '状态',
      field: 'status',

      cellRender: {
        name: 'CellTag',
        options: [
          {
            color: 'success',
            label: '启用',
            value: 1,
          },
          { color: 'error', label: '停用', value: 0 },
        ],
      },
    },
    {
      field: 'update_time',
      title: '更新时间',
      formatter({ cellValue }) {
        return dayjs(cellValue * 1000).format('YYYY-MM-DD')
      },
    },
    {
      field: 'create_time',
      title: '创建时间',
      formatter({ cellValue }) {
        return dayjs(cellValue * 1000).format('YYYY-MM-DD')
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: async (page) => {
        const search = await gridApi.formApi.getFiltersValues()
        const { list } = await getTreeAllCategory({
          page: page.currentPage,
          limit: page.pageSize,
          quick_search: quick_search.value,
          search,
        })
        return list
      },
    },
  },
  id: 'goodsTimeCategory',
  customConfig: {
    storage: true,
  },
  checkboxConfig: {
    // labelField: 'id',
    highlight: true,
    checkStrictly: true, // ← 加这个
  },
  pagerConfig: {
    enabled: false,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    refresh: true,
    zoom: true,
  },
  treeConfig: {
    parentField: 'parent_id',
    rowField: 'id',
    // expandAll: true,
  },
}

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions })

const isAllExpanded = ref(false)
const toggleExpandAll = () => {
  isAllExpanded.value = !isAllExpanded.value
  gridApi.grid?.setAllTreeExpand(isAllExpanded.value)
}

/**
 *  快速查询查询
 */
const quick_search = ref()
function doSearch() {
  gridApi.query()
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-actions>
        <Button type="primary" @click="toggleExpandAll">
          {{ isAllExpanded ? '折叠全部' : '展开全部' }}
        </Button>
      </template>
      <template #toolbar-tools>
        <Input v-model:value="quick_search" allow-clear placeholder="通过分类编号，名称模糊搜索" style="width: 300px; margin-right: 8px" @change="doSearch" />
      </template>
    </Grid>
  </Page>
</template>

<style scoped></style>
